<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="row">
          <header class="col-md-2">
             <div class="logo">
                 <a href="#">
                 <img src="./img/阿里云.PNG" alt="" class="hidden-xs">
                 <span class="visible-xs">阿里百秀</span>
                </a>
             </div>
             <div class="nav">
                <ul>
                    <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                    <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
                    <li><a href="#" class="glyphicon glyphicon-tree-deciduous">奇趣事</a></li>
                    <li><a href="#" class="glyphicon glyphicon-cutlery">美食杰</a></li>
                </ul>

             </div>

          </header>
          <article class="col-md-7">
             <!-- 新闻· -->
             <div class="new clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/阿里云1.PNG" alt="">
                            <p>阿里百秀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/马云.PNG" alt="">
                            <p>奇了 成都一小区护卫长得像马云 实名纷纷求合影</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/马云.PNG" alt="">
                            <p>奇了 成都一小区护卫长得像马云 实名纷纷求合影</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/马云.PNG" alt="">
                            <p>奇了 成都一小区护卫长得像马云 实名纷纷求合影</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/马云.PNG" alt="">
                            <p>奇了 成都一小区护卫长得像马云 实名纷纷求合影</p>
                        </a>
                    </li>

                </ul>

             </div>
             <!-- 发表 -->
             <div class="publish">
                <div class="row">
                    <div class="col-sm-9">
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p  class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p  class="hidden-xs"指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！</p>
                        <p  class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签: 健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /  趣味生活</span></p>
                    </div>
                    <div class="col-sm-3 pic">
                        <img src="./img/指甲.PNG" alt="" class="hidden-xs">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p  class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p  class="hidden-xs"指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！</p>
                        <p  class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签: 健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /  趣味生活</span></p>
                    </div>
                    <div class="col-sm-3 pic">
                        <img src="./img/指甲.PNG" alt="" class="hidden-xs">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p  class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p  class="hidden-xs"指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！</p>
                        <p  class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签: 健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /  趣味生活</span></p>
                    </div>
                    <div class="col-sm-3 pic">
                        <img src="./img/指甲.PNG" alt="" class="hidden-xs">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p  class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p  class="hidden-xs"指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！</p>
                        <p  class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签: 健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /  趣味生活</span></p>
                    </div>
                    <div class="col-sm-3 pic">
                        <img src="./img/指甲.PNG" alt="" class="hidden-xs">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p  class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p  class="hidden-xs"指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！</p>
                        <p  class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签: 健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /  趣味生活</span></p>
                    </div>
                    <div class="col-sm-3 pic">
                        <img src="./img/指甲.PNG" alt="" class="hidden-xs">
                    </div>
                </div>

                
             </div>
          </article>
          <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="./img/banner.PNG" alt="">
                </a>
                <a href="#" class="hot">
                     <span  class="btn btn-primary">热搜</span>
                     <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                     <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台...</p>
                </a>
          </aside>
        </div>
    </div>
</body>
</html>